<template>
    <div>
        <!-- 垂直的轮播图 -->
        <el-carousel v-if="loopList.length" height="calc(100vh - 60px)" direction="vertical" :autoplay="false">
            <el-carousel-item v-for="item in loopList" :key="item._id">
                <div class="item">
                    <el-card shadow="hover" :body-style="{ padding: '5px' }">
                        <div style="padding: 14px">
                            <span class="tab-title">标题：{{ item.title }}</span>
                            <div class="bottom">
                                <time class="tab-time">{{ whichTime(item.editTime) }}</time>
                            </div>
                            <div class="introduction">简介：{{ item.introduction }}</div>
                            <div class="detail">详情：{{ item.detail }}</div>
                        </div>
                        <div class="more">
                            更多信息,请访问:
                            <br />
                            http://baidu.com
                        </div>
                    </el-card>
                </div>
            </el-carousel-item>
        </el-carousel>
        <el-empty v-else description="暂无发布资源" />
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
import moment from 'moment';

moment.locale('zh-cn');
const whichTime = time => {
    return moment(time).format('llll');
};
//接收资源数据
const loopList = ref([]);

//初始化获取
onMounted(async () => {
    const res = await axios.get('/webapi/product/list');
    loopList.value = res.data.data;
});
</script>

<style lang="scss" scoped>
.item {
    width: 100%;
    height: 100%;
}
.el-card {
    width: 50%;
    height: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    .detail,
    .more,
    .introduction {
        margin-top: 20px;
    }
}
</style>
